<template>
	 
  <view class="collect_">
	 
			<view class="collect_wrapper">
			  <u-swipe-action
			    :show="item.show"
			    :index="index"
				v-for="(item, index) in list" 
			    :key="index"
			    @click="click"
			    @open="open"
			    :options="options"
			    :vibrate-short="true"
			  >
			    <view
			      class="item_wrapper u-border-bottom"
			      @tap.stop="itemCollect(item)"
			    >
				<u-checkbox-group>
				<u-checkbox 
					@change="(e)=>{checkboxChange(e,item)}" 
					v-model="item.checked" 		
					:name="item.id"
					:id="item.id"
					:checked="item.checked"
					:disabled="current==0?false:true"
					size ="30"
					shape="circle"
				></u-checkbox>
				</u-checkbox-group>
			      <view class="left_">
			        <image :src="httpUrlFn(item.goodsImage)" mode="aspectFill"></image>
			      </view>
			      <view class="right_ title-wrap">
			        <view class="item_1">
			          <view class="left_wrapper">
			            {{ item.goodsName }}
			          </view>
			          <text class="money_wrapper"> ￥{{ item.goodsPrice }} </text>
			        </view>
			       <!-- <view class="item_2" >
			          <view
			            >数量：<text>{{ item.goodsNum }} </text></view
			          >
			        </view> -->
					<view class="item_1">
					  <view class="left_wrapper">
					   规格： {{ item.goodsSpec }}
					  </view>
					  <text class="money_wrapper"> X{{item.goodsNum }} </text>
					</view>
					<view class="item_1">
					  <view class="left_wrapper">
					   
					  </view>
					  <text class="money_wrapper"> <u-number-box 
					  :disabled-input="true"
					  :min="0"
					  :max="item.goodsStock"
					  v-model="item.goodsNum" 
					  @change="numberChange" 
					  @plus="(e)=>{addChange(e,item)}" 
					  @minus="(e)=>{minusChange(e,item,index)}"></u-number-box> </text>
					</view>
					
			        <!--            <view class="item_3">-->
			        <!--              <view>官方标配 黑色</view>-->
			        <!--            </view>-->
			      </view>
			    </view>
			  </u-swipe-action>
			</view>
			
			
		
	  		
   
	
	<view class="none_list_wrapper" v-if="list.length === 0">
	  <view class="none_list">
	    <image src="/static/None/sc.png"></image>
	    <text>暂无购物车列表喔~</text>
	  </view>
	</view>
	
	
	
    <u-loadmore
	  v-if="list.length !== 0"
      :status="status"
      :icon-type="iconType"
      :load-text="loadText"
      @loadmore="loadNextFn"
    />
	
	<view class="foodcar-t">
		<view class="food-show-k">
			<u-tabs-swiper ref="tabs" :list="tablist" :is-scroll="false"
			     :current="current"
			     @change="tabschange"
			     swiperWidth="750"
			     active-color="#202E3C"
			     inactive-color="#202E3C"
			     font-size="30"
			     bar-height="6"
			     bar-width="40" ></u-tabs-swiper>
		</view>
		<view class="food-show-cz" v-if="current==0">
			<view class="total-num">
				总价：<text>{{totalnum}}</text>
				
			</view>
			<view class="foodcar-t-select">
				<u-checkbox-group>
				<u-checkbox 
					@change="checkboxChange1" 
					v-model="oderchecked" 		
					:size ="30"
					shape="circle"
					:label-size="35"
				>全选</u-checkbox>
				</u-checkbox-group>
			</view>
			
			<view class="bt-js" @tap="goconfirm">
				去结算
			</view>
		</view>
		
		<view class="food-show-cz" v-if="current==1">
			
			
			<view class="bt-js" @tap="clearcat">
				清空
			</view>
		</view>
		
	</view>
	
  </view>
  
</template>

<script>
import { delUserCollectDelete,operateGoodsCar,clearGoodsCar,delGoodsCar, getSelUserCollect,getGoodsCarList} from "@/api/collect";
import { BASE_URL_IMAHE } from "../../../../utils/https";

export default {
  name: "index.vue",
  data() {
    return {
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      list: [],
	  oderchecked:false,
	  tablist:[{
					name: '正常'
				}, {
					name: '失效'
				},],
	  // swiperCurrent:0,
	  current:0,
      disabled: false,
      btnWidth: 180,
      show: false,
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      params: {
        userId: "",
        v:"",
      },
      userInfoServer: "",
	  totalnum:0,
	  catlist:[],
	  nocatlist:[],
	  idCard:{}
	  
    };
  },
  onShow() {
    this.params.userId = uni.getStorageSync("userId") || "";
    this.params.v = uni.getStorageSync("v") || "";
    this.listPage();
	this.totalnum=0
	this.oderchecked=false
	if (!uni.getStorageSync("userId")) {
	  // 弹窗告诉用户去登录
	  uni.showModal({
	    title: "温馨提示",
	    content: "此时此刻需要您登录喔~",
	    // showCancel: false,
	    confirmText: "去登录",
	    cancelText: "再逛会",
	    success: (res) => {
	      if (res.confirm) {
	        uni.navigateTo({
	          url: "/pages/empower/mp-weixin",
	        });
	      }
	      if (res.cancel && getCurrentPages().length > 1) {
	        uni.navigateBack();
	      }
	      
	    },
	  });
	}
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.showLoading({
      title: "正在刷新...",
    });
    this.params.current = 1;
    this.params.size = 10;
    this.list = [];
	this.catlist = [];
	this.nocatlist = [];
    this.listPage();
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载");
    // this.listPage();
  },
  methods: {
	  // 生成去支付页
	  goconfirm(){
		var goodpay=  this.list.filter((item)=>{
			  if(item.checked==true){
				  return item
			  }
		  })
		  if(goodpay.length==0){
			  uni.showToast({
			  	title:"请选择您要付款的商品",
			  	icon:"none",
			  })
			  return
		  }
		  
		  if(this.idCard&&this.idCard.idCardNo){
			 uni.navigateTo({
			 	url:"/pages/subpackage/confirm/index?orderList="+JSON.stringify(goodpay)+"&payPrice="+this.totalnum+"&idCard="+JSON.stringify(this.idCard)
			 })   
		  }else{
			  uni.navigateTo({
			  	url:"/pages/subpackage/confirm/index?orderList="+JSON.stringify(goodpay)+"&payPrice="+this.totalnum
			  })   
		  }
		
	  },
	  async clearcat(){
		  if(this.list.length==0){
			  uni.showToast({
			  	title:"暂无列表",
			  				icon:"none",
			  })
			  return
		  }
		  var res= await clearGoodsCar(this.params)
		  // if(res)
		  console.log(res)
		  // return
		  if(this.nocatlist.length==0){
			  return
		  }else{
			 var res= await clearGoodsCar(this.params)
			 if(res.result==0){
			 uni.showToast({
			 	title:res.message,
			 				icon:"none",
			 })
			 }else{
				 uni.showToast({
				 	title:res.message,
				 				icon:"none",
				 })
			 }
		  }
		  
	  },
	  //步进器
	  numberChange(){
		  
	  },
	 async addChange(e,item){
		 var that=this
		 item.goodsNum=e.value
		  let data={
			  userId:uni.getStorageSync("userId"),
			  goodsCarIds:item.id,
			  operateType:"1",
		  }
		 
		  var res =await operateGoodsCar(JSON.stringify(data))
			
		  if(res.result==0){
		  }else{
			  
			  uni.showToast({
			  	title:res.message,
				icon:"none",
			  })
			  this.listPage();
			
		  }
		  
		  setTimeout(()=>{
		  	that.totalnum=0
		  	var a =	that.list.filter((item1)=>{
		  			if(item1.checked==true){
		  				that.totalnum+=item1.goodsNum*item1.goodsPrice
		  			}
		  			
		  		
		  		})
		  },100)
		  
		  
		  
	  },
	 async minusChange(e,item,index){
		  item.goodsNum=e.value
		  var that=this
		  let data={
		  			  userId:uni.getStorageSync("userId"),
		  			  goodsCarIds:item.id,
		  			  operateType:"2",
		  }
			console.log(e.value)
			
		  if(e.value==0){
			  
			  uni.showModal({
			      title: '提示',
			      content: '您将删该商品。',
			      success: async function (res) {
			  	if (res.confirm) {
					var ress = await operateGoodsCar(JSON.stringify(data))
								  
					if(ress.result==0){
							// that.listPage();
						   that.list.splice(index, 1);
						   // setTimeout(()=>{
						   // 	this.totalnum=0
						   // 	var a =	that.list.filter((item1)=>{
						   // 		if(that.oderchecked==true){
						   // 			if(item1.checked==true){
						   // 				that.totalnum+=item1.goodsNum*item1.goodsPrice
						   // 			}
						   			
						   // 		}else{
						   // 			that.totalnum=0
						   // 		}
						   // 		})
						   // },100)
						   setTimeout(()=>{
						   			  console.log(that.list,"that.list")
						   	that.totalnum=0
						   	var a =	that.list.filter((item2)=>{
						   			if(item2.checked==true){
						   				that.totalnum+=item2.goodsNum*item2.goodsPrice
						   			}
						   			
						   		
						   		})
						   },100)
								  
								  
					}else{
								  uni.showToast({
								  	title:res.message,
									icon:"none",
								  })
								  that.listPage();
								
					}
			  	    
					
			  	} else if (res.cancel) {
					// that.listPage();
					that.$set(
					  that.list[index],
					  "goodsNum",
					 1
					);
			  	   
			  	}
			      }
			  })
			  
			  
			  return
		  }
		  
		  
		
		  var res = await operateGoodsCar(JSON.stringify(data))
		  			  
		  if(res.result==0){
			 
			  if(e.value==0){
				  this.listPage();
			  }
			  
			  
		  }else{
		  			  uni.showToast({
		  			  	title:res.message,
		  				icon:"none",
		  			  })
		  			  this.listPage();
		  			
		  }
		  setTimeout(()=>{
			  console.log(that.list,"that.list")
		  	that.totalnum=0
		  	var a =	that.list.filter((item2)=>{
		  			if(item2.checked==true){
		  				that.totalnum+=item2.goodsNum*item2.goodsPrice
		  			}
		  			
		  		
		  		})
		  },100)
		  
	  },
	  
	  // tab栏切换
	  tabschange(index) {
	    console.log(index, "tab切换");
	    this.current = index;
		if(index==0){
			this.list=this.catlist
		}else{
			this.list=this.nocatlist
		}
	    //切换状态重新请求
	    // this.myOrder()
	  },
	  
	  // 选中某个复选框时，由checkbox时触发
	  		checkboxChange(e,item) {
				console.log(item)
				setTimeout(()=>{
					if(item.checked==true){
						this.totalnum+=item.goodsNum*item.goodsPrice
					}else{
						this.totalnum-=item.goodsNum*item.goodsPrice
					}
				},100)
				
				
	  			// console.log(e);
				// let select=false
				// console.log(this.list,"this.list")
				// this.list.forEach((element)=>{
				// 	console.log(element.checked==false)
				// 	if(element.checked==false){
				// 		select=true
				// 	}
					
				// })
				
				// console.log(select,"console.log(select)")
				// if(select==true){
				// 	this.oderchecked=false
				// 	console.log(select,"1")
				// }else{
				// 	this.oderchecked=true
				// 	console.log(select,"2")
				// }
				setTimeout(()=>{
					var a =	this.list.filter((item)=>{
						// console.log(item.checked==false,"item1111")
							return item.checked==false
						})
						if(a.length>0){
							this.oderchecked=false
						}else{
							this.oderchecked=true
						}
				},100)
			
				
	  		},
			checkboxChange1(e) {
				console.log(e);
				var that= this
				this.list.forEach((element)=>{
					element.checked=!that.oderchecked
				})
				
				setTimeout(()=>{
					this.totalnum=0
					var a =	this.list.filter((item)=>{
						if(that.oderchecked==true){
							if(item.checked==true){
								this.totalnum+=item.goodsNum*item.goodsPrice
							}
							
						}else{
							this.totalnum=0
						}
						})
				},100)
				
			},
	  		// 选中任一checkbox时，由checkbox-group触发
	  		checkboxGroupChange(e) {
	  			// console.log(e);
	  		},
	  		// 全选
	  		checkedAll() {
	  			this.list.map(val => {
	  				val.checked = true;
	  			})
	  		},
    httpUrlFn(item) {
      return BASE_URL_IMAHE + item;
    },

    async listPage() {
		
      this.status = "loading";
	   this.list=[]
	   this.catlist=[]
	   this.nocatlist=[]
      const res = await getGoodsCarList(this.params);
	  
	 
	  if( res.result == 0){
		  if(res.idCard){
			  this.idCard=res.idCard
		  }
		  // console.log(res, "res");
		  this.nocatlist=res.loseGoodsCarList
		  res.goodsCarList.forEach((element,index)=>{
		  		  element.checked=false
		  		  this.catlist.push(element)
		  		  
		  })
		 if(this.current==0){
		 			   this.list=this.catlist
		 }else{
		 			  this.list=this.nocatlist
		 }
		 
		  
		  this.status = "loadmore";
	  }
     
	  
    
      if (res.result == 0 && res.goodsCarList.length > 0) {
        

        if (res.goodsCarList.length == 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
		  
        }


        if (res.goodsCarList.length >= this.params.size) {
          this.params.current++;
          return;
        }
		 

        if (this.list.length <= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
          res.goodsCarList.length !== 0 &&
          res.goodsCarList.length < this.params.size
        ) {
          this.params.current++;
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }
      } else {
        setTimeout(() => {
          this.status = "nomore";
        }, 800);
      }
    },

    //点击组件触发上拉加载
    loadNextFn() {
      console.log("点击组件触发上拉加载2123");
      this.listPage();
    },

    async click(index, index1) {
      // console.log(index, index1, "点击");
	  var that=this
      if (index1 == 0) {
        const list = this.list[index];
        const params = {
          userId: this.params.userId,
          goodsCarIds: list.id,
        };

        uni.showModal({
          title: "温馨提示",
          content: "是否确认删除该收藏？",
          // showCancel: false,
          confirmText: "确认",
          cancelText: "取消",
          success: async (res) => {
            if (res.confirm) {
				// return
              const res = await delGoodsCar(params);
              console.log(res, "删除");
              if (res.result == 0) {
                that.list.splice(index, 1);
                that.$u.toast(`删除成功`);
              }
            }
          },
        });
      }
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      console.log(index, "open");
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      const data = JSON.parse(JSON.stringify(this.list));
      if (data[index].show === true) {
        data[index].show = false;
      } else {
        data[index].show = true;
      }
      // data[index].show = true;
      data.forEach((val, idx) => {
        console.log(idx, "idx");
        if (index != idx) data[idx].show = false;
      });

      this.list = data;

      console.log(this.list, "滑动");
    },
    itemCollect(item) {
      // console.log(item, "点击了每一项");
	  return
      uni.navigateTo({
        url: `/pages/subpackage/goods/detail?prodId=${item.prodId}&pic=${
          item.pic
        }&prodName=${item.prodName}&price=${item.price}&oriPrice=${
          item.oriPrice
        }&vrPayUsers=${item.vrPayUsers}&commission=${
          item.commission
        }&properties=${item.properties}&content=${encodeURIComponent(
          JSON.stringify(item.content)
        )}&channelId=${item.channelId}&itemType=${item.channelId}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.collect_ {
  background: #ffffff;
  min-height: 100vh;
  padding-bottom: rpx(50);
  padding-top: 10rpx;
}
.checkBox_k{
	// flex: 1;
	margin-left: 0;
	margin-right: 0;
	background-color: red;
}
.none_list_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	height: 100%;
    > .none_list {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
	  margin-top: 30vh;
  	
      > image {
        width: rpx(222);
        height: rpx(158);
        vertical-align: middle;
      }
      > text {
        font-size: rpx(13);
        font-weight: 400;
        color: #b2b2b2;
      }
    }
  }
.item_wrapper {
  display: flex;
  padding: rpx(8) rpx(12);
  // width: rpx(200);
  > .left_ {
    margin-right: rpx(6);
    > image {
      width: rpx(72);
      height: rpx(72);
      vertical-align: middle;
    }
  }
  > .right_ {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > .item_1 {
      display: flex;
      > .left_wrapper {
        font-size: rpx(12);
        font-weight: 400;
        color: #353535;
        flex: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /*最大行数*/
      }
      > .money_wrapper {
        font-size: rpx(12);
        font-weight: bold;
        color: #353535;
        margin-left: rpx(20);
      }
    }
    > .item_2 {
      //width: 54px;
      //height: 16px;
      margin-top: rpx(2);
      display: flex;

      > view {
        background: rgba(250, 81, 81, 0.1);
        border: rpx(1) solid #fa5151;
        padding: rpx(1) rpx(3);
        font-size: rpx(10);
        font-weight: 400;
        color: #fa5151;
        border-radius: rpx(2);
      }
    }
    > .item_3 {
      > view {
        font-size: rpx(12);
        font-weight: 400;
        color: #888888;
      }
    }
	
  }
  .collect_wrapper{
	  width: 100%;
	  padding-bottom: rpx(80);
  }
}

.u-checkbox__label{
	margin-right:rpx(0) !important;
}
.food-show-k{
	// width: 180rpx;
	// height: 60rpx;
	// color: white;
	// font-weight: bold;
	// background-color: orangered;
	// text-align: center;
	// line-height: 60rpx;
	// border-radius: 30rpx;
	// font-size: 24rpx;
}
.food-show-cz{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.foodcar-t{
	z-index: 100;
	position: fixed;
	width: 100%;
	height: rpx(50);
	box-sizing: border-box;
	padding: 0 rpx(10);
	background-color: white;
	border-top: rpx(1) solid #b2b2b2;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	bottom: 0rpx;
}
.bt-js{
	width: 180rpx;
	height: 60rpx;
	color: white;
	font-weight: bold;
	background-color: orangered;
	text-align: center;
	line-height: 60rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	margin-left: 20rpx;
	
}
.total-num{
	margin-right: 20rpx;
	text{
		color:red;
	}
}

</style>
